<template>
  <div class="full-reduction-page min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-green-100">
    <!-- Hero Section -->
    <div class="relative overflow-hidden bg-gradient-to-r from-green-600 via-emerald-600 to-green-700">
      <div class="absolute inset-0">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="absolute top-0 left-0 w-full h-full">
          <div class="absolute top-10 left-10 w-32 h-32 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
          <div class="absolute top-20 right-20 w-24 h-24 bg-white bg-opacity-10 rounded-full animate-pulse delay-1000"></div>
          <div class="absolute bottom-10 left-1/3 w-40 h-40 bg-white bg-opacity-10 rounded-full animate-pulse delay-2000"></div>
        </div>
      </div>
      
      <div class="relative container mx-auto px-4 py-16">
        <div class="text-center text-white">
          <h1 class="text-5xl font-bold mb-4 animate-fade-in">
            <span class="bg-gradient-to-r from-yellow-300 to-green-300 bg-clip-text text-transparent">
              满减优惠
            </span>
          </h1>
          <p class="text-xl mb-8 opacity-90 animate-fade-in-delay">满额立减，购买越多优惠越大</p>
          <div class="flex justify-center space-x-8 text-sm">
            <div class="flex items-center">
              <div class="w-3 h-3 bg-yellow-400 rounded-full mr-2 animate-ping"></div>
              <span>满额立减</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 bg-green-400 rounded-full mr-2 animate-ping delay-500"></div>
              <span>阶梯优惠</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 bg-blue-400 rounded-full mr-2 animate-ping delay-1000"></div>
              <span>无门槛券</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="container mx-auto px-4 py-8">
      <div class="bg-white rounded-2xl shadow-lg p-6">
        <el-skeleton :rows="5" animated />
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="container mx-auto px-4 py-8">
      <div class="bg-white rounded-2xl shadow-lg p-6 text-center">
        <el-icon size="48" class="text-gray-400 mb-4"><Warning /></el-icon>
        <p class="text-gray-600 mb-4">{{ error }}</p>
        <el-button type="primary" @click="fetchPromotions">重新加载</el-button>
      </div>
    </div>

    <!-- Content -->
    <div v-else class="container mx-auto px-4 py-8">
      <!-- Active Promotions -->
      <div class="bg-white rounded-2xl shadow-lg p-6">
        <h3 class="text-xl font-bold text-gray-800 mb-6">正在进行的满减活动</h3>
        
        <div v-if="promotions.length === 0" class="text-center py-12">
          <el-icon size="64" class="text-gray-300 mb-4"><ShoppingBag /></el-icon>
          <p class="text-gray-500 text-lg">暂无满减活动</p>
          <p class="text-gray-400 text-sm mt-2">敬请期待更多优惠活动</p>
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="promotion in promotions"
            :key="promotion.billNo"
            class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200 hover:shadow-lg transition-all duration-300"
          >
            <div class="flex items-start justify-between mb-4">
              <div>
                <h4 class="font-bold text-gray-800 mb-2">{{ promotion.promName }}</h4>
                <p class="text-sm text-gray-600">{{ promotion.billCode }}</p>
              </div>
              <div class="bg-green-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                {{ getPromotionStatus(promotion) }}
              </div>
            </div>
            
            <div class="space-y-2 mb-4">
              <div
                v-for="(detail, index) in promotion.details"
                :key="index"
                class="flex justify-between items-center p-3 bg-white rounded-lg border"
              >
                <span class="text-sm font-medium">满{{ Number(detail.taxAmount) }}元</span>
                <span class="text-sm font-bold text-green-600">
                  {{ detail.description || `减${Number(detail.dedRate)}元` }}
                </span>
              </div>
            </div>
            
            <div class="flex items-center justify-between text-sm text-gray-600 mb-4">
              <span>有效期: {{ formatDate(promotion.startTime) }} - {{ formatDate(promotion.endTime) }}</span>
            </div>
            
            <button 
              @click="navigateToProducts"
              :disabled="!isPromotionActive(promotion)"
              class="w-full py-2 rounded-lg font-medium transition-all duration-200"
              :class="isPromotionActive(promotion) 
                ? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white' 
                : 'bg-gray-300 text-gray-500 cursor-not-allowed'"
            >
              {{ getButtonText(promotion) }}
            </button>
          </div>
        </div>
      </div>

      <!-- How it works -->
      <div class="bg-white rounded-2xl shadow-lg p-6 mt-8">
        <h3 class="text-xl font-bold text-gray-800 mb-6">满减优惠说明</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon size="24" class="text-green-600"><ShoppingCart /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-800 mb-2">选择商品</h4>
            <p class="text-sm text-gray-600">选择参与满减活动的商品加入购物车</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon size="24" class="text-green-600"><Money /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-800 mb-2">满足条件</h4>
            <p class="text-sm text-gray-600">购物车金额达到满减门槛即可享受优惠</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon size="24" class="text-green-600"><Check /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-800 mb-2">自动减免</h4>
            <p class="text-sm text-gray-600">结算时系统自动计算并减免相应金额</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Warning, ShoppingBag, ShoppingCart, Money, Check } from '@element-plus/icons-vue'
import { promotionApi } from '@/api'
import type { FullReductionPromotion } from '@/api/modules/promotion'

const router = useRouter()
const loading = ref(true)
const error = ref('')
const promotions = ref<FullReductionPromotion[]>([])

// Methods
function navigateToProducts() {
  router.push('/products')
}
async function fetchPromotions() {
  try {
    loading.value = true
    error.value = ''
    
    const response = await promotionApi.getPromotionsByType('MJ')
    
    // response is ApiResponse<Promotion[]> due to response interceptor
    if (response.code === 1000 && response.data) {
      // Filter by Chinese promType or English promType and only active promotions
      const allPromotions = (response.data || []).filter((p: any) => 
        p.promType === 'MJ' || p.promType === '满减'
      ) as FullReductionPromotion[]
      
      // Only show non-ended promotions (including not started and active)
      promotions.value = allPromotions.filter(promotion => !isPromotionEnded(promotion))
    } else {
      throw new Error(response.message || '获取满减活动失败')
    }
  } catch (err: any) {
    error.value = err.message || '网络错误，请稍后重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

function isPromotionActive(promotion: FullReductionPromotion): boolean {
  const now = new Date()
  const startTime = new Date(promotion.startTime)
  const endTime = new Date(promotion.endTime)
  
  return promotion.status === 1 && now >= startTime && now <= endTime
}

function isPromotionEnded(promotion: FullReductionPromotion): boolean {
  const now = new Date()
  const endTime = new Date(promotion.endTime)
  
  return promotion.status === 0 || now > endTime
}

function getPromotionStatus(promotion: FullReductionPromotion): string {
  const now = new Date()
  const startTime = new Date(promotion.startTime)
  const endTime = new Date(promotion.endTime)
  
  if (promotion.status === 0) return '已停用'
  if (now < startTime) return '未开始'
  if (now > endTime) return '已结束'
  return '进行中'
}

function getButtonText(promotion: FullReductionPromotion): string {
  const now = new Date()
  const startTime = new Date(promotion.startTime)
  const endTime = new Date(promotion.endTime)
  
  if (promotion.status === 0) return '已停用'
  if (now < startTime) return '未开始'
  if (now > endTime) return '已结束'
  return '立即参与'
}

function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// Lifecycle
onMounted(() => {
  fetchPromotions()
})
</script>

<style scoped>
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-delay {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-fade-in-delay {
  animation: fade-in-delay 1s ease-out 0.3s both;
}
</style>